<template>
	<view class="homeContainer">
		<view class="backContainer">
			<view class="infoContainer">
				<view class="loginContainer" @click="gotoWrite">
					<view class="headImg" @click="gotoMyself" :style="[{backgroundImage:'url('+userInfo.avatar+')'}]">
					</view>
					<view class="warningContainer" v-if="userInfo==''">
						<view class="title">
							欢迎您，请登录
						</view>
						<view class="vipInfo">
							成为肯德基会员共享享更多优惠
						</view>
					</view>
					<view class="userContainer" v-else>
						<view class="username" @click="gotoMyself">
							{{userInfo.name}}
							<view class="iconContainer">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="orderContainer" @click="gotoSee">
							<view class="icon">
								
							</view>
							<view class="order">
								订单
							</view>
						</view>
					</view>
				</view>
				<view class="restaurantContainer">
					<view class="titleContainer" @click="gotoSelect">
						<view class="titleContent">
							<view class="title">
								{{storeInfo.shop_name}}
							</view>
						</view>
						<view class="warning" v-if="storeInfo.status==1">
							{{storeInfo.shop_address}}  营业中
						</view>
						<view class="warning" v-else>
							{{storeInfo.shop_address}}  已闭店
						</view>
					</view>
					<view class="restaurantImg">	
					</view>
				</view>
				<view class="orderNow" @click="gotoOrder">
					<view class="orderImg"></view>
					<view class="orderTitle">
						<view class="title">
							开始点餐
						</view>
						<view class="engTitle">
							Order Now
						</view>
					</view>
				</view>
				<view class="temporaryContainer">
					<view class="cancel">
						<u-icon name="close" color="#999999" size="14" bold></u-icon>
					</view>
					<view class="allInfo">
						<view class="warningImg"></view>
						<view class="titleContainer">
							<view class="title">
								查看临时订单
							</view>
							<view class="content">
								未登录可在此查看
							</view>
						</view>
					</view>
					<view class="click">
						<view class="content">
							点击查看
						</view>
					</view>
				</view>
				<view class="cardContainer">
					<view class="allInfo">
						<view class="cardImg">
							
						</view>
						<view class="cardInfoContainer">
							<view class="title">
								登陆后可查看卡券
							</view>
							<view class="content">
								使用卡券更优惠
							</view>
						</view>
					</view>
					<view class="toLogin">
						<view class="content">
							登陆查看
						</view>
					</view>
				</view>
				<view class="godContainer">
					<view class="title">
						大神卡·到店套餐特惠24.9元起
					</view>
					<view class="godContent">
						<view class="cancel">
							<u-icon name="plus" color="#FFF" size="15" bold></u-icon>
						</view>
						<view class="godImg">
							
						</view>
						<view class="content">
							<view class="foodTitle">
								大神卡专享经典主食三件套
							</view>
							<view class="warning">
								<view class="first">
									大神卡
								</view>
								<view class="second">
									专享价
								</view>
							</view>
							<view class="priceContainer">
								￥<text class="price">34</text>
							</view>
						</view>
					</view>
				</view>
				<view class="endContainer">
					<u-divider text="已经是底部了"></u-divider>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" :round="10" mode="center">
			<view class="confirmContent">
				<view class="title">
					店铺暂未营业！
				</view>
				<view class="operate">
					<view @click="show=false" class="confirmBtn"
					>确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:'',
				storeInfo:'',
				show:false
			}
		},
		methods: {
			close(){
				this.show=false
			},
			gotoOrder(){
				if(this.storeInfo.status==1){
					uni.navigateTo({
						url:'../orderMeal/orderMeal'
					})
				}
				else{
					this.show=true
				}
			},
			gotoSee(){
				uni.navigateTo({
					url:'./myOrder'
				})
			},
			gotoSelect(){
				uni.navigateTo({
					url:'../selectRestaurant/selectRestaurant'
				})
			},
			gotoMyself(){
				if(this.userInfo!=''){
					uni.navigateTo({
						url:'./myself'
					})
				}
			},
			gotoWrite(){
				if(this.userInfo==''){
					uni.navigateTo({
						url:'./getUserInfo'
					})
				}
			},
		},
		mounted(){
			this.userInfo=uni.getStorageSync('STATE_KEY')
			uni.request({
				url:'http://localhost:8080/kfc/shop',
				method:'get'
			}).then(res=>{
				console.log('店铺信息',res.data.data)
				this.storeInfo=res.data.data
			})
		}
	}
</script>

<style>
	page{
		background-color: rgb(247,247,247);
	}
</style>

<style lang="scss">
	.homeContainer{
		.button{
			width: 100vw;
			height: 80rpx;
			background-color: #999999;
		}
		width: 100vw;
		.backContainer{
			width: 100%;height: 450rpx;
			background-color: rgb(228,0,48);
			position: relative;
			.infoContainer{
				width:686rpx;
				position: absolute;
				bottom: -1280rpx;
				left: 30rpx;
				display: flex;flex-direction: column;align-items:center;
				>view{
					width: 100%;
				}
				.loginContainer{
					background-color: rgb(230,230,230);
					height: 120rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					display: flex;align-items: center;
					.headImg{
						width: 80rpx;height: 80rpx;
						border-radius: 50%;
						background-color: aliceblue;
						margin-left: 30rpx;
						background-position: center;
						background-size: contain;
					}
					.warningContainer{
						display: flex;
						flex-direction: column;
						margin-left: 30rpx;
						.title{
							font-size: 30rpx;
						}
						.vipInfo{
							font-size: 25rpx;
							margin-top: 5rpx;
						}
					}
					.userContainer{
						margin-left: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 500rpx;
						.username{
							font-size: 30rpx;
							display: flex;
							align-items: center;
							.iconContainer{
								margin-left: 20rpx;
							}
						}
						.orderContainer{
							display: flex;
							flex-direction: column;
							align-items: center;
							.icon{
								width: 50rpx;
								height: 50rpx;
								background-image: url(../../static/homePage/order.png);
								background-position: center;
								background-size: contain;
							}
							.order{
								font-size: 26rpx;
								margin-top: 10rpx;
							}
						}
					}
				}
				.restaurantContainer{
					background-color: #FFF;
					border-bottom-right-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					height:250rpx;
					display: flex;
					justify-content: space-between;
					.titleContainer{
						margin-top: 30rpx;
						margin-left: 20rpx;
						display: flex;flex-direction: column;
						.titleContent{
							display: flex;
							align-items: center;
							.title{
								font-size: 36rpx;
								font-weight: bold;
								width: 220rpx;
							}
							.chooseIcon{
								margin-left: 40rpx;
							}
						}
						.warning{
							margin-top: 10rpx;
							font-size: 24rpx;
							color:#999999;
							width: 450rpx;
						}
					}
					.restaurantImg{
						width: 200rpx;
						height: 200rpx;
						// background-color: aliceblue;
						margin-top: 30rpx;
						margin-right: 20rpx;
						background-position: center;
						background-size: contain;
						background-repeat: no-repeat;
						background-image: url(../../static/homePage/store.png);
					}
				}
				.orderNow{
					margin-top: 30rpx;
					background-color: rgb(228,0,48);
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color:#FFF;
					.orderImg{
						width: 50rpx;
						height: 50rpx;
						background-image: url(../../static/homePage/goOrder.png);
						background-position: center;
						background-size: contain;
						margin-right: 10rpx;
					}
					.orderTitle{
						margin-top: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 20rpx;
						.title{
							font-size: 30rpx;
							font-weight: bold;
						}
						.engTitle{
							font-size: 20rpx;
						}
					}
				}
				.temporaryContainer{
					position: relative;
					background-color: #FFF;
					border-radius: 20rpx;
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.cancel{
						position: absolute;
						width: 45rpx;
						height: 45rpx;
						left: 0;
						top: 0;
						background-color: rgb(247,247,247);
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.allInfo{
						margin-left: 50rpx;
						display: flex;
						align-items: center;
						margin-top: 10rpx;
						margin-bottom: 10rpx;
						.warningImg{
							width: 80rpx;
							height: 80rpx;
							// background-color: aliceblue;
							background-image: url(../../static/homePage/warning.png);
							background-position: center;
							background-size: contain;
							background-repeat: no-repeat;
						}
						.titleContainer{
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							.title{
								font-size: 24rpx;
								font-weight: bold;
							}
							.content{
								color: rgb(228,0,48);
								font-size: 24rpx;
								margin-top: 5rpx;
							}
						}
					}
					.click{
						margin-right: 20rpx;
						border: 1px solid rgb(228,0,48);
						color:rgb(228,0,48);
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						.content{
							margin-top: 10rpx;
							margin-bottom: 10rpx;
							margin-left: 20rpx;
							margin-right: 20rpx;
						}
					}
				}
				.cardContainer::before{
					content: '我的卡包';
					position: absolute;
					top:-65rpx;
					left: 0;
					width: 150rpx;
					height: 60rpx;
					background-color: RGB(228,0,48);
					border: 3.5rpx solid #333333;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					color:#fff;
				}
				.cardContainer{
					position: relative;
					margin-top: 120rpx;
					background-color: #FFF;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.allInfo{
						display: flex;
						align-items: center;
						margin-left: 30rpx;
						.cardImg{
							width: 120rpx;
							height: 80rpx;
							// background-color: aliceblue;
							background-image: url(../../static/homePage/card.png);
							background-position: center;
							background-size: contain;
							background-repeat: no-repeat;
						}
						.cardInfoContainer{
							margin-left: 20rpx;
							margin-top: 40rpx;
							margin-bottom: 40rpx;
							display: flex;
							flex-direction: column;
							.title{
								font-size: 33rpx;
								font-weight: bold;
							}
							.content{
								margin-top: 5rpx;
								font-size: 24rpx;
								color:#999999;
							}
						}
					}
					.toLogin{
						margin-right: 20rpx;
						border: 1px solid rgb(228,0,48);
						color:#FFF;
						background-color: rgb(228,0,48);
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						.content{
							margin-top: 10rpx;
							margin-bottom: 10rpx;
							margin-left: 20rpx;
							margin-right: 20rpx;
						}
					}
				}
				.godContainer{
					margin-top: 30rpx;
					border-radius: 20rpx;
					background-color: rgb(43,43,43);
					display: flex;
					flex-direction: column;
					align-items: center;
					overflow: hidden;
					>view{
						width: 93%;
					}
					>.title{
						font-size: 28rpx;
						color:rgb(247,205,131);
						font-weight: bold;
						margin-top: 30rpx;
					}
					.godContent{
						position: relative;
						background-color: #FFF;
						border-radius: 15rpx;
						margin-top: 20rpx;
						margin-bottom: 30rpx;
						display: flex;
						align-items: center;
						.cancel{
							position: absolute;
							width: 60rpx;
							height: 60rpx;
							background-color: rgb(228,0,48);
							border-top-left-radius: 15rpx;
							border-bottom-right-radius: 15rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							bottom: 0;
							right: 0;
						}
						.godImg{
							// background-color: aliceblue;
							background-image: url(../../static/homePage/vipCard.png);
							background-position: center;
							background-size: contain;
							background-repeat: no-repeat;
							width: 150rpx;
							height: 100rpx;
							margin-left: 30rpx;
						}
						.content{
							margin-left: 40rpx;
							display: flex;
							flex-direction: column;
							margin-top: 20rpx;
							margin-bottom: 30rpx;
							.foodTitle{
								font-size: 28rpx;
								color:#333333;
								font-weight: bold;
							}
							.warning{
								display: flex;
								align-items: center;
								margin-top: 10rpx;
								>view{
									width: 65rpx;
									height: 30rpx;
									font-size: 20rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-weight: 700;
								}
								.first{
									color:rgb(247,205,131);
									background-color: rgb(64,60,51);
								}
								.second{
									color:rgb(64,60,51);
									background-color:rgb(247,205,131);
								}
							}
							.priceContainer{
								margin-top: 7rpx;
								font-size: 20rpx;
								color:rgb(234,62,98);
								.price{
									font-size: 28rpx;
									font-weight: bold;
								}
							}
						}
					}
				}
				.endContainer{
					margin-top: 30rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}
	.confirmContent{
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			margin-top: 40rpx;
			font-size: 36rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}
		.operate{
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			>view{
				width: 120rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}
			.cancelBtn{
				border: 1px solid #999999;
			}
			.confirmBtn{
				border:1px solid rgb(228,0,48);
				background-color: rgb(228,0,48);
				color:#FFF;
			}
		}
	}
</style>
